<template>
  <div class="card">
    <div class="card-top">
      <div class="card-top-menu-active">我的课表</div>
      <div class="week-selector">
        <!-- <el-button type="primary" text="text" @click="prevWeek"
          >上一周</el-button
        > -->
        <span>
          <el-select v-model="currentWeek" size="small" style="width: 80px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </span>
        <!-- <el-button type="primary" text="text" @click="nextWeek"
          >下一周</el-button
        > -->
      </div>
    </div>
    <el-divider />
    <div class="card-bottom">
      <div class="schedule-container">
        <div class="schedule-header">
          <div class="weekday" />
          <div v-for="day in weekdays" :key="day" class="weekday">
            {{ day }}
          </div>
        </div>
        <div class="schedule-body">
          <div v-for="time in timeSlots" :key="time" class="time-slot">
            <div class="time">{{ time }}</div>
            <div
              v-for="day in weekdays"
              :key="`${day}-${time}`"
              class="course-cell"
              @click="showCourseDetail(getCourse(day, time))"
            >
              <div
                v-if="getCourse(day, time)"
                class="course"
                :class="`course-${getCourse(day, time)?.type}`"
              >
                {{ getCourse(day, time)?.name }}
                <div class="course-info">
                  <span>{{ getCourse(day, time)?.teacher }}</span>
                  <span>{{ getCourse(day, time)?.location }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <el-dialog v-model="showDetail" :title="selectedCourse?.name" width="30%">
        <div class="course-detail">
          <p><span class="label">教师:</span> {{ selectedCourse?.teacher }}</p>
          <p><span class="label">地点:</span> {{ selectedCourse?.location }}</p>
          <p>
            <span class="label">时间:</span> {{ selectedCourse?.day }}
            {{ selectedCourse?.time }}
          </p>
          <p>
            <span class="label">类型:</span>
            {{ getCourseTypeName(selectedCourse?.type) }}
          </p>
          <p>
            <span class="label">周次:</span>
            {{ selectedCourse?.weeks?.join(", ") }}
          </p>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

type CourseType = "compulsory" | "elective" | "practical" | "pe";

interface Course {
  day: string;
  time: string;
  name: string;
  teacher: string;
  location: string;
  type: CourseType;
  weeks: number[];
}

const currentWeek = ref<number>(1);
const options = ref<{ value: number; label: string }[]>(
  Array.from({ length: 18 }, (_, i) => ({
    value: i + 1,
    label: "第" + String(i + 1) + "周"
  }))
);
const showDetail = ref<boolean>(false);
const selectedCourse = ref<Course | null>(null);

const weekdays = ref<string[]>([
  "周一",
  "周二",
  "周三",
  "周四",
  "周五",
  "周六",
  "周日"
]);
const timeSlots = ref<string[]>([
  "08:00-09:40",
  "10:00-11:40",
  "14:00-15:40",
  "16:00-17:40",
  "19:00-20:40"
]);

const courses = ref<Course[]>([
  {
    day: "周一",
    time: "08:00-09:40",
    name: "高等数学",
    teacher: "张教授",
    location: "教学楼A101",
    type: "compulsory",
    weeks: Array.from({ length: 18 }, (_, i) => i + 1)
  },
  {
    day: "周二",
    time: "10:00-11:40",
    name: "大学英语",
    teacher: "李老师",
    location: "外语楼203",
    type: "compulsory",
    weeks: Array.from({ length: 18 }, (_, i) => i + 1)
  },
  {
    day: "周三",
    time: "14:00-15:40",
    name: "毛概",
    teacher: "李老师",
    location: "外语楼203",
    type: "compulsory",
    weeks: Array.from({ length: 18 }, (_, i) => i + 1)
  },
  {
    day: "周四",
    time: "16:00-17:40",
    name: "大学语文",
    teacher: "李老师",
    location: "外语楼203",
    type: "compulsory",
    weeks: Array.from({ length: 18 }, (_, i) => i + 1)
  },
  {
    day: "周五",
    time: "19:00-20:40",
    name: "表演课",
    teacher: "李老师",
    location: "外语楼203",
    type: "compulsory",
    weeks: Array.from({ length: 18 }, (_, i) => i + 1)
  }
]);

const prevWeek = () => {
  if (currentWeek.value > 1) currentWeek.value--;
};

const nextWeek = () => {
  if (currentWeek.value < 20) currentWeek.value++;
};

const getCourse = (day: string, time: string): Course | undefined => {
  return courses.value.find(
    course =>
      course.day === day &&
      course.time === time &&
      course.weeks.includes(currentWeek.value)
  );
};

const getCourseTypeName = (type?: CourseType): string => {
  const typeNames = {
    compulsory: "必修课",
    elective: "选修课",
    practical: "实践课",
    pe: "体育课"
  };
  return type ? typeNames[type] : "";
};

const showCourseDetail = (course?: Course) => {
  if (course) {
    selectedCourse.value = course;
    showDetail.value = true;
  }
};
</script>

<style scoped lang="less">
.card {
  width: 100%;
  .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    .week-selector {
      display: flex;
      align-items: center;
      gap: 10px;
      > span {
        color: var(--color-main-text);
      }
      //   button {
      //     padding: 5px 10px;
      //     // background: var(--color-primary);
      //     // color: white;
      //     border: none;
      //     border-radius: 4px;
      //     cursor: pointer;
      //   }
    }
  }
  .card-bottom {
    padding: 20px;
    .schedule-container {
      .schedule-header {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        text-align: center;
        font-weight: bold;
        padding: 10px 0;
        .weekday {
          color: var(--color-header-background-1);
        }
      }
      .schedule-body {
        display: grid;
        gap: 5px;
        .time-slot {
          display: grid;
          grid-template-columns: 100px repeat(7, 1fr);
          border-bottom: 1px solid var(--color-border-light);
          min-height: 80px;
          gap: 5px;
          .time {
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .course-cell {
            background-color: #f1f8ff;
            border-right: transparent;
            padding: 5px;
            cursor: pointer;
            .course {
              border-radius: 4px;
              padding: 8px;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              text-align: center;
              //   color: white;
              &-compulsory {
                background: var(--color-primary);
              }
              &-elective {
                background: var(--color-success);
              }
              &-practical {
                background: var(--color-warning);
              }
              &-pe {
                background: var(--color-danger);
              }
              .course-info {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
    .course-detail {
      .label {
        display: inline-block;
        width: 60px;
        color: var(--color-text-secondary);
      }
    }
  }
}
</style>
